<template>
  <div class="home">
    <div class="model">

    </div>
  </div>
</template>

<script>
// @ is an alias to /src

import * as THREE from 'three/build/three.module'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { onMounted } from 'vue'
import h337 from 'heatmap.js'
export default {
  name: 'Home',
  setup () {
    onMounted(() => {
      var scene = new THREE.Scene()
      const container = document.querySelector('.model')
      var geometry = new THREE.PlaneGeometry(12, 12)

      // canvas.width = 128
      // canvas.height = 128
      // var ctx = canvas.getContext('2d')
      // ctx.fillStyle = '#ff00ff'
      // ctx.fillRect(0, 0, 512, 128)
      // ctx.beginPath()

      // let plane = {}
      setInterval(() => {
        // scene.remove(plane)
        var canvasBox = document.createElement('div')
        document.body.appendChild(canvasBox)

        canvasBox.style.width = '200px'
        canvasBox.style.height = '200px'
        canvasBox.style.position = 'absolute'
        canvasBox.style.top = '0px'
        var heatmapInstance = h337.create({
          container: canvasBox,
          backgroundColor: 'rgba(0,102,256,0.02)', // '#121212'    'rgba(0,102,256,0.2)'
          // gradient: {
          //   0.5: 'blue',
          //   0.8: 'red',
          //   0.95: 'white',
          //   0.6: 'yellow'
          // },
          radius: 10, // [0,+∞)
          opacity: 0.8
        })
        // 构建一些随机数据点,网页切图价格这里替换成你的业务数据
        var points = []
        var max = 0
        var cwidth = 200
        var cheight = 200
        var len = 300
        while (len--) {
          var val = Math.floor(Math.random() * 100)
          max = Math.max(max, val)
          var point = {
            x: Math.floor(Math.random() * cwidth),
            y: Math.floor(Math.random() * cheight),
            value: val
          }
          points.push(point)
        }
        var data = {
          max: max,
          data: points
        }
        // 因为data是一组数据,web切图报价所以直接setData
        heatmapInstance.setData(data)
        var texture = new THREE.CanvasTexture(canvasBox.querySelector('canvas'))
        // itemSize = 3 因为每个顶点都是一个三元组。

        var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide })
        texture.needsUpdate = true
        const plane = new THREE.Mesh(geometry, material)
        plane.material.side = 2
        plane.position.x = 10
        plane.position.y = 5
        plane.position.z = -2

        plane.rotation.x = 1.5707963267948966

        scene.add(plane)
        document.body.removeChild(canvasBox)
      }, 3000)
      var width = container.offsetWidth // 窗口宽度
      var height = container.offsetHeight // 窗口高度
      var k = width / height // 窗口宽高比
      // var s = 200

      var camera = new THREE.PerspectiveCamera(60, k, 1, 10000)
      camera.position.set(0, 200, 400) // 设置相机位置
      // camera.lookAt(scene.position) // 设置相机方向(指向的场景对象)

      var renderer = new THREE.WebGLRenderer()
      // renderer.setClearColor('rgb(135, 206, 250)', 1.0)
      renderer.setSize(width, height)
      renderer.setClearColor(0xeeeeee, 1)
      container.appendChild(renderer.domElement)
      var loader = new GLTFLoader()
      // const dracoLoader = new DRACOLoader()
      // dracoLoader.setDecoderPath('/draco/')
      // dracoLoader.preload()
      // loader.setDRACOLoader(dracoLoader)
      function render () {
        renderer.render(scene, camera)// 执行渲染操作
      }
      let controls
      loader.load(
        // 'static/model/scene.gltf',
        'static/model/scene2.glb',
        function (gltf) {
          console.log(gltf)
          gltf.scene.traverse(function (child) {
            console.log(child, 'child')
            if (child.isMesh) {
              // child.geometry.center() // center here
              child.material.emissive = child.material.color
              child.material.emissiveMap = child.material.map
            }
          })
          gltf.scene.scale.set(5, 5, 5) // scale here

          scene.add(gltf.scene)
          // setTimeout(() => {
          //   camera.position.set(0, 200, 400)
          // }, 5000)
          // renderer.render(scene, camera)
          controls = new OrbitControls(camera, renderer.domElement)
          // controls.addEventListener('change', render)
          animate()
          // 使动画循环使用时阻尼或自转 意思是否有惯性
          controls.enableDamping = true
          // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
          controls.dampingFactor = 0.1
          controls.minDistance = 1 // 限制缩放
          controls.maxDistance = 20
          controls.target.set(0, 4, 0) // 旋转中心点
          controls.update()
        },
        function (xhr) {
        // 侦听模型加载进度
          console.log((xhr.loaded / xhr.total * 100) + '% loaded')
        },
        function (error) {
        // 加载出错时的回调
          console.log(error)
          console.log('An error happened')
        }
      )
      function animate () {
        // 更新控制器
        controls.update()
        render()

        // 更新性能插件
        // stats.update()
        requestAnimationFrame(animate)
      }

      // const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
      // directionalLight.position.set(100, 100, 100)
      // directionalLight.target = plane
      const ambient = new THREE.AmbientLight(0xffffff)
      scene.add(ambient)
      // directionalLight.position.set(400, 200, 300)
      // scene.add(loader)
      // renderer.render(scene, camera)
    })

    return {
      // ...toRefs(state)
    }
  }

}
</script>

<style lang="scss" scoped>

.home{
  width:100%;
  height: 100%;
  .model{
    width: 100%;
    height: 100%;
  }
}
</style>
